<template>
  <div v-loading="loading" class="app-container">
    <WorkFilter
      :keyword.sync="obj.filter.keyword"
      :typ.sync="obj.filter.typ"
      :mode.sync="obj.filter.mode"
      @success="getObjList"
    />
    <el-row :gutter="20">
      <el-col
        :span="12"
      >
        <el-card>
          <div slot="header">
            <span> 工作列表({{ obj.total }}) </span>
          </div>
          <div>
            <el-table
              :data="obj.dataList"
              style="width: 100%"
              :highlight-current-row="true"
              :current-row-key="obj.obj_id"
              row-key="id"
              @row-click="handleSelectObj"
            >
              <el-table-column prop="name" label="名称" />
              <el-table-column prop="typ" label="类型" />
              <el-table-column prop="mode" label="模型" />
              <el-table-column prop="line" label="线路" />
              <el-table-column prop="host.name" label="主机" />
              <el-table-column prop="script.name" label="功能" />
              <el-table-column prop="json.name" label="配置" />
              <el-table-column prop="extra" label="额外参数" />
              <el-table-column
                fixed="right"
                label="操作"
                width="160"
              >
                <template slot-scope="{row}">
                  <el-button size="mini" type="text" style="margin-right: 8px" @click="runObj(row)">
                    启动
                  </el-button>
                  <el-button size="mini" type="text" style="margin-right: 8px" @click="handleUpdateObj(row)">
                    编辑
                  </el-button>
                  <el-popconfirm title="确定删除?" @onConfirm="deleteObj(row.id)">
                    <el-button slot="reference" size="mini" type="text">
                      删除
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="obj.total>0" :total="obj.total" :page.sync="obj.filter.page_num" :limit.sync="obj.filter.page_size" @pagination="getObjList" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <WorkerList :work-id="obj.obj_id" />
      </el-col>
    </el-row>
    <ObjDialog
      :obj-id="String(obj.form.obj_id)"
      :status.sync="obj.form.status"
      :show.sync="obj.form.show"
      @success="getObjList"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  deleteWorkApi as deleteObjApi,
  getWorkListApi as getObjListApi,
  runWorkApi
} from '@/api/workflow'
import ObjDialog from './components/WorkDialog'
import WorkFilter from './components/WorkFilter'
import WorkerList from './components/WorkerList'
export default {
  name: 'User',
  components: { Pagination, ObjDialog, WorkFilter, WorkerList },
  data() {
    return {
      loading: false,
      obj: {
        total: 0,
        dataList: [],
        obj_id: null,
        filter: {
          keyword: '',
          typ: '',
          mode: '',
          page_num: 1,
          page_size: 20
        },
        refresh: false,
        form: {
          obj_id: null,
          show: false,
          status: 'create'
        }
      }
    }
  },
  created() {
    this.getObjList()
  },
  activated() {
    this.getObjList()
  },
  methods: {
    handleSelectObj(row) {
      this.obj.obj_id = row.id
    },
    getObjList() {
      this.loading = true
      const data = this.obj.filter
      getObjListApi(data).then(resp => {
        if (resp.code === 0) {
          this.obj.dataList = resp.data.data_list
          this.obj.total = resp.data.total
          if (this.obj.dataList.length > 0) {
            this.obj.obj_id = this.obj.dataList[0].id
            this.obj.refresh = true
          } else {
            this.obj.obj_id = null
          }
        }
        this.loading = false
      })
    },
    handleCreateObj() {
      this.obj.form.status = 'create'
      this.obj.form.show = true
    },
    handleUpdateObj(row) {
      this.obj.form.obj_id = row.id
      this.obj.form.status = 'update'
      this.obj.form.show = true
    },
    runObj(row) {
      this.loading = true
      const data = {
        obj_id: parseInt(row.id)
      }
      runWorkApi(row.host.ip, data).then(resp => {
        if (resp.code === 0) {
          this.$notify({
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
          this.getObjList()
        }
      })
    },
    deleteObj(obj_id) {
      this.loading = true
      const data = {
        obj_id: parseInt(obj_id)
      }
      deleteObjApi(data).then(resp => {
        if (resp.code === 0) {
          this.$notify({
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
          this.getObjList()
        }
      })
    }
  }
}
</script>
